<template>
  <div class="my-comment">
    <block v-if="comments.length">
      <div
        class="i-card-box"
        v-for="(comment, index) in comments"
        :key="index"
        @click="goBookDetail(comment)"
      >
        <i-card
          :title="comment.userId.nickName"
          :thumb="comment.userId.avatarUrl"
          :extra="comment.createTime"
        >
          <view slot="content" class="primary-color">{{ comment.bookName }}</view>
          <view slot="footer">
            {{ comment.comment }}
            <div class="comment-system">{{ comment.geoLocation || '未知位置' }}-{{ comment.phoneModel || '未知型号' }}</div>
          </view>
        </i-card>
      </div>
    </block>
    <div class="no-data" v-else>
      <image
        :src="noData"
        mode="scaleToFill"
        :lazy-load="true"
      />
    </div>
    <i-message id="message" />
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex';
  import moment from 'moment';
  import { $Message } from '../../../static/iview-weapp/base/index';
  export default {
    data() {
      return {
        noData: require('../../../static/images/no-data.png'),
        page: 1,
        comments: [],
      }
    },
    async onShow () {
      await this.getMyComment({
        openId: this.openId,
        page: this.page
      });
      this.comments = this.myCommentListInfo.list;
    },
    async onPullDownRefresh () { // 下拉刷新
      this.page = 1;
      await this.getMyComment({
        openId: this.openId,
        page: this.page
      });
      this.comments = this.myCommentListInfo.list;
      wx.stopPullDownRefresh({
        success: () => {
          $Message({
            content: '刷新完成',
          });
        }
      });
    },
    async onReachBottom () { // 上拉加载更多
      if (this.comments.length === this.myCommentListInfo.total) { // 已经加载完
        $Message({
          content: '已无更多数据',
        });
        return false;
      }
      this.page ++; // 这里要先进行page累加，不能直接使用this.page++作为参数，否则会多走一次paeg=1的请求
      await this.getMyComment({
        openId: this.openId,
        page: this.page
      });
      this.comments.push(...this.myCommentListInfo.list); // 使用concat也可以
    },
    methods: {
      ...mapActions('commentModule', ['getMyComment']),
      goBookDetail ({ isbnCode }) {
        wx.navigateTo({
          url: `/pages/bookDetail/main?isbnCode=${isbnCode}`
        });
      }
    },
    computed: {
      ...mapState('meModule', {
        openId (state) {
          return state.openId;
        }
      }),
      ...mapState('commentModule', {
        myCommentListInfo (state) {
          const { myCommentListInfo: { list = [], total = 0 } } = state;
          list.forEach(element => {
            element.createTime = moment(element.createTime).format('YYYY-MM-DD HH:mm');
          });
          return { list, total };
        }
      }),
    },
  }
</script>

<style lang="less" scoped>
.my-comment {
  margin-bottom: 30rpx;
  .i-card-box {
    margin-top: 10rpx;
    .comment-system {
      text-align: right;
      font-size: 10px;
    }
  }
}
</style>